:root {
  --rotation: 10deg;
  --rotationVal : 10;
  --opac: 0.0;
}

@font-face {
  font-family: myFont;
  src: url(barlowfold.otf);
}

@font-face {
  font-family: bodyText;
  src: url(Sen-VariableFont_wght.ttf);
  font-weight: 200;
}

body { font-family: MyFont; }

.scene {
  position: absolute;
  left: 0vw;
  top: 0vw;
  width: 100vw;
  height: 100vh;
  perspective: 3000px;
  perspective-origin: 50vw 0vh;
  overflow: hidden;
  transition: opacity 1s;
  opacity: var(--opac);
}

.bg img {
  z-index: -99999;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100vw;
  height: auto;
  transition: opacity 1s;
  opacity: var(--opac);
}

@media only screen and (hover: none) and (pointer: coarse){
  .bg img {
  height: 100vh;
  bottom:  0px;
  }
}

.box {
  width: 100vw;
  height: 100vh;
  position: relative;
  transform-origin: 0vw 100vh 15vh;
  transform: translateZ( -15vh);
  transform-style: preserve-3d;
  transition: transform 1s;
}

@media only screen and (hover: none) and (pointer: coarse){
  .box {
  width: 100vw;
  height: 100vh;
  position: relative;
  transform-origin: 0vw 100vh 25vh;
  transform: translateZ( -15vh);
  transform-style: preserve-3d;
  transition: transform 1s;
}
}

.box.show-front  { transform: translateZ( -15vh) rotateY(   0deg); }
.box.show-back   { transform: translateZ( -50px) rotateY(-180deg); }
.box.show-right  { transform: translateZ(-10vw) rotateY( -20deg); }
.box.show-left   { transform: translateZ(-10vw) rotateY(20deg);}
/*.box.show-left   { transform: translateZ(-10vw) rotateY( calc(1deg * calc((asin(100 * var(--w)/(sqrt(pow(40 * var(--h),2) + pow(100 * var(--w),2)))))))); }*/
.box.show-top    { transform: translateZ(-10vh) rotateX( 40deg); }
.box.show-bottom { transform: translateZ(-100px) rotateX(  90deg); }

@media only screen and (hover: none) and (pointer: coarse){
  .box.show-top    { transform: translateZ(-25vh) rotateX( 30deg); }
  .box.show-front  { transform: translateZ( -25vh) rotateY(   0deg); }
  .box.show-left   { transform: translateZ(-10vw) rotateY(40deg);}
  .box.show-right   { transform: translateZ(-10vw) rotateY(-40deg);}
  }




.box__face {
  position: absolute;
  color: rgb(0, 0, 0);;
  text-align: center;
}

.cornerbutton {
  position :fixed;
  background-color: #2c78f9;
  font-size: 2vh;
  right: 0vw;
  width: 100vw;
  height: 5vh;
  bottom: 0px;
  text-align: left;
  color: rgb(255, 255, 255);
  pointer-events: all;
}

.cornerbutton p{
  position: relative;
  top: 0px;
  left: 2ex;
}


@media only screen and (hover: none) and (pointer: coarse){
  .cornerbutton  { height: 8vh; font-size: 5vh; line-height: 0px; width: 105vw; left: -2.5vw;}
  }


.box__face--front,
.box__face--back {
  pointer-events: none;
  width: 100vw;
  height: 100vh;
  /*line-height: 10vh;*/
}

.content {
  image-rendering: optimizeQuality;
  overflow: scroll;
  scrollbar-color: #2c78f9  #2c2c2c00;
  scrollbar-width: thin;
  display: block;
  flex-direction: column;
  position: absolute;
  bottom: 5vh;
  width: 45vw;
  height: 95vh;
  right: 0px;
 pointer-events: all;
 color: white;
 text-align: right;
}

.content p {
  font-size: 24px;
  text-align: justify;
  position: absolute;
  bottom: 25vh;
  max-width: 20vw;
  right: 5vw;
}

@media only screen and (hover: none) and (pointer: coarse){
    .content  { max-height: 92vh; bottom: 8vh; width: 100vw; top: 10vh}
    .content p {max-width: 100%; left: 0; font-size: 44px; margin: 5vw; top: 0vh; color:#ffffff}
  }

.post {
  display: flex;
  flex-direction: row;
  padding: 2vw;
  font-family: bodyText;
}


.post img {
  filter: brightness(100%) grayscale(0%);
  transition: filter 1s;
  position: relative;
  height: 30vw;
}

.post img:hover{
  filter: brightness(200%) grayscale(100%) ;
}

.post p {
  margin: 0 1vw 0 1vw;
  text-align: justify;
  font-size: 18px;
}


.box__face--top {
  z-index: 100;
  position: absolute;
  background-color: #2c77f900;
  color: white;
  width: 100vw;
  height: 30vh;
  top:35vh;
  text-align: right;
  /*line-height: 100vh;*/
}

@media only screen and (hover: none) and (pointer: coarse){
  .box__face--top { width: 100vw; height: 50vh;top:25vh;}
  }


.index {
  position: absolute;
  z-index: 101;
  left: 10vw;
  bottom: 0px;
  font-size: 1.5vw;
  overflow: hidden;
  padding: 1vw;
  text-align: left;
}

@media only screen and (hover: none) and (pointer: coarse){
  .index   { font-size: 6vw;}
  }

.box__face--top h2{
  font-size: 4vh;
  line-height: 0vw;
  text-align: left;
}

@media only screen and (hover: none) and (pointer: coarse){
  .box__face--top h2 {font-size: 12vw;}
  }


.box__face--top a{
  display: block; color: white;  text-decoration: none;
}

.box__face--top img {
  position: absolute;
  bottom: 0px;
  left: 0vw;
  width: 26vw;
}

@media only screen and (hover: none) and (pointer: coarse){
  .box__face--top img {width: 52vw;}
  }

.box__face--top a.active { background-color: white; color: #2c78f9; }

.box__face--top a:hover:not(.active) { background-color: white; color: #2c78f9; }


.box__face--front  { background: hsla(0, 0%, 100%, 0); }
.box__face--right  { background: hsla(209, 100%, 50%, 0); }
.box__face--back   { background: #2c78f9; }
.box__face--left   { background: hsl(212, 100%, 50%); }
.box__face--top    { background: #2c77f900; }
.box__face--bottom { background: hsla(300, 100%, 50%, 0.7); }

.box__face--front  { transform: rotateY(  0deg) translateZ( 15vh); }

@media only screen and (hover: none) and (pointer: coarse){
  .box__face--front {transform: rotateY(  0deg) translateZ( 25vh);}
  }


.box__face--left   { transform: translateX(-50vw) rotateY(-90deg);}
.box__face--top   { transform:  translateY(-50vh) translateZ(40vh) rotateX(-90deg);}

.foreground {
  display: flex;
  position: absolute;
  transform-origin: center;
  width: 120vw;
  left: -5vw;
  bottom: 0px;
  background-color: rgba(137, 43, 226, 0);
  transform: translateZ(0vh) translateY(10vw) rotateX(0deg);
  pointer-events: none;
}

.foreground img {
  image-rendering: optimizeQuality;
  align-self: center;
  width: 120vw;

  pointer-events: none;
}
@media only screen and (hover: none) and (pointer: coarse){
  .foreground {
  left: -10vw;
  width: 300vw;
  bottom: 0px;
  background-color: rgba(137, 43, 226, 0);
  transform: translateZ(10vh) translateY(5vh) rotateX(0deg);
  pointer-events: none;

  .foreground {
    width: 250vw;
  }
  }
  }

.bird {
  display: flex;
  position: absolute;
  transform-origin: center;
  width: 40vw;
  left: 30vw;
  height: 100vh;
  top: 0px;
  background-color: rgba(137, 43, 226, 0);
  transform: translateZ(20vh) translateY(-20vh) rotateX(0deg);
  pointer-events: none;
}

.bird img {
  image-rendering: optimizeQuality;
  align-self: center;
  max-width: 100%;
  pointer-events: none;
}
@media only screen and (hover: none) and (pointer: coarse){
  .bird {
  width: 100vw;
  left: 0px;
  height: 100vh;
  top: 0px;
  background-color: rgba(137, 43, 226, 0);
  transform: translateZ(10vh) translateY(-10vh) rotateX(0deg);
  pointer-events: none;
  }
  }

  .contact {
  display: flex;
  position: absolute;
  transform-origin: center;
  width: 10vw;
  left: 45vw;
  height: 10vh;
  top: 0px;
  background-color: rgba(137, 43, 226, 0);
  transform: translateZ(30vh) translateY(40vh) translateX(-20vw);
}

.contact img {
  image-rendering: optimizeQuality;
  align-self: center;
  max-width: 100%;
}
@media only screen and (hover: none) and (pointer: coarse){
  .contact {
  width: 30vw;
  left: 35vw;
  height: 35vw;
  top: 0px;
  background-color: rgba(137, 43, 226, 0);
  transform: translateZ(10vh) translateY(60vh) translateX(-20vw) rotateX(0deg);

  }
  }

.smoke {
   display: flex;
  position: absolute;
  transform-origin: center;
  width: 80vw;
  left: 10vw;
  height: 100vh;
  top: 0px;
  background-color: rgba(137, 43, 226, 0);
  transform: translateZ(-18vh) translateY(-6vh) rotateX(0deg);
  pointer-events: none;
}

@media only screen and (hover: none) and (pointer: coarse){
  .smoke {
    position: absolute;
  width: 150vw;
  left: -20vw;
  height: 150vh;
  bottom: 0px;
  background-color: rgba(137, 43, 226, 0);
  transform: translateZ(-3vh) translateY(-20vh) rotateX(0deg);
  pointer-events: none;
  }
  }

.smoke img {
  image-rendering: optimizeQuality;
  align-self: center;
  max-width: 100%;
  pointer-events: none;
}

.spaceship {
   display: flex;
  position: absolute;
  transform-origin: center;
  width: 80vw;
  right: -10vw;
  height: 100vh;
  top: 0px;
  background-color: rgba(137, 43, 226, 0);
  transform: translateZ(-50vh) translateY(6vh) rotateX(-10deg);
  pointer-events: none;
}

@media only screen and (hover: none) and (pointer: coarse){
  .spaceship {
   width: 150vw;
  left: -50px;
  height: 150vh;
  top: 0px;
  background-color: rgba(137, 43, 226, 0);
  transform: translateZ(-20vh) translateY(-14vh) rotateX(  -7.5deg);
  pointer-events: none;
  }
  }

  .spaceship img {
  image-rendering: optimizeQuality;
  align-self: center;
  max-width: 100%;
  pointer-events: none;
}

.clouds {
   display: flex;
  position: absolute;
  transform-origin: center;
  width: 120vw;
  right: 5vw;
  height: 100vh;
  top: 0px;
  background-color: rgba(137, 43, 226, 0);
  transform: translateZ(-100vh) translateY(6vh) rotateX(-10deg);
  pointer-events: none;
}

@media only screen and (hover: none) and (pointer: coarse){
  .clouds {
    width: 150vw;
  right: -20vw;
  height: 100vh;
  top: 0px;
  background-color: rgba(137, 43, 226, 0);
  transform: translateZ(-10vh) translateY(-33vh) rotateX(  -7.5deg);
  pointer-events: none;
  }
  }

  .clouds img {
  image-rendering: optimizeQuality;
  align-self: center;
  max-width: 100%;
  pointer-events: none;
}